<template>
  <div class="edit">
    <div class="edit-tab">
      <n-tabs v-model:value="name" type="card" tab-style="min-width: 80px;">
        <n-tab-pane v-for="panel in panels" :key="panel" :tab="panel.toString()" :name="panel">
          <template v-if="panel == 'Edit'">
            <div>
              <rich-text-editor v-model="edit.modelValue"></rich-text-editor>
            </div>
          </template>
          <template v-if="panel == 'Review'">
            <div class="review">
              <div style="padding:40px;" v-html="edit.modelValue">
              </div>
            </div>
          </template>
        </n-tab-pane>
      </n-tabs>
    </div>
    <div class="sub-btn">
      <n-button>submit</n-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import RichTextEditor from '../components/RichTextEditor.vue'
import { ref, reactive } from 'vue'
import { NButton } from 'naive-ui'
import { useRoute } from 'vue-router'
import useStore from '../store'
import { storeToRefs } from 'pinia'

const store = useStore()
// const { ele } = storeToRefs(store)

const route = useRoute()

const name = ref<string>('Edit')
const panels = ref<string[]>(['Edit', 'Review'])


type Edit = {
  modelValue: string
}
const edit = reactive<Edit>({
  modelValue: 'hello'
})
if (store.ele) {
  
  edit.modelValue = store.ele
  
}

</script>

<style lang="scss" scoped>
.edit {
  background-color: var(--theme-content-color);
  position: relative;
  .sub-btn {
    z-index: 99;
    position: absolute;
    top: 2px;
    right: 0;
  }
}
</style>